<template>
  <div class="git-panel flex flex-col h-full">
    <!-- 面板标题 -->
    <div class="panel-header flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
      <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 flex items-center">
        <Icon icon="material-symbols:git-branch" class="w-4 h-4 mr-2" />
        Git 版本控制
      </h3>
      <button 
        @click="$emit('close')"
        class="p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded"
      >
        <Icon icon="material-symbols:close" class="w-4 h-4" />
      </button>
    </div>

    <!-- Git 状态 -->
    <div class="p-4 border-b border-gray-200 dark:border-gray-700">
      <div class="flex items-center justify-between mb-3">
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">当前分支</span>
        <div class="flex items-center text-sm text-green-600 dark:text-green-400">
          <Icon icon="material-symbols:account-tree" class="w-4 h-4 mr-1" />
          {{ currentBranch }}
        </div>
      </div>
      
      <div class="flex items-center justify-between">
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">仓库状态</span>
        <div class="flex items-center text-sm" :class="statusColor">
          <Icon :icon="statusIcon" class="w-4 h-4 mr-1" />
          {{ repositoryStatus }}
        </div>
      </div>
    </div>

    <!-- 文件变更 -->
    <div class="flex-1 overflow-auto">
      <div class="p-4">
        <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 flex items-center">
          <Icon icon="material-symbols:change-history" class="w-4 h-4 mr-2" />
          文件变更 ({{ changedFiles.length }})
        </h4>
        
        <div v-if="changedFiles.length === 0" class="text-center py-8">
          <Icon icon="material-symbols:check-circle" class="w-12 h-12 text-green-300 dark:text-green-600 mx-auto mb-3" />
          <p class="text-sm text-gray-500">工作区干净，没有待提交的更改</p>
        </div>
        
        <div v-else class="space-y-2">
          <div 
            v-for="file in changedFiles" 
            :key="file.path"
            class="flex items-center justify-between p-3 bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700"
          >
            <div class="flex items-center flex-1">
              <Icon 
                :icon="getFileStatusIcon(file.status)" 
                :class="getFileStatusColor(file.status)"
                class="w-4 h-4 mr-3" 
              />
              <div class="flex-1">
                <p class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ file.name }}</p>
                <p class="text-xs text-gray-500">{{ file.path }}</p>
              </div>
            </div>
            
            <div class="flex items-center space-x-2">
              <span 
                class="px-2 py-1 text-xs rounded-full"
                :class="getStatusBadgeClass(file.status)"
              >
                {{ getStatusText(file.status) }}
              </span>
              <button 
                @click="toggleFileStaging(file)"
                class="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded"
                :title="file.staged ? '取消暂存' : '暂存文件'"
              >
                <Icon 
                  :icon="file.staged ? 'material-symbols:remove' : 'material-symbols:add'" 
                  class="w-3 h-3" 
                />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 提交区域 -->
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
      <div class="space-y-3">
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
            提交信息
          </label>
          <textarea
            v-model="commitMessage"
            placeholder="输入提交信息..."
            class="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
            rows="3"
          />
        </div>
        
        <div class="flex space-x-2">
          <button 
            @click="commitChanges"
            class="flex-1 flex items-center justify-center px-3 py-2 text-sm bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors disabled:opacity-50"
            :disabled="!commitMessage.trim() || stagedFiles.length === 0"
          >
            <Icon icon="material-symbols:commit" class="w-4 h-4 mr-1" />
            提交 ({{ stagedFiles.length }})
          </button>
          
          <button 
            @click="stageAllFiles"
            class="px-3 py-2 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
            :disabled="changedFiles.length === 0"
          >
            <Icon icon="material-symbols:select-all" class="w-4 h-4" />
          </button>
        </div>
      </div>
    </div>

    <!-- Git 操作 -->
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
      <div class="grid grid-cols-2 gap-2">
        <button 
          @click="pullChanges"
          class="flex items-center justify-center px-3 py-2 text-sm bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 rounded-md hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors"
          :disabled="isLoading"
        >
          <Icon icon="material-symbols:download" class="w-4 h-4 mr-1" />
          拉取
        </button>
        
        <button 
          @click="pushChanges"
          class="flex items-center justify-center px-3 py-2 text-sm bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 rounded-md hover:bg-green-100 dark:hover:bg-green-900/30 transition-colors"
          :disabled="isLoading"
        >
          <Icon icon="material-symbols:upload" class="w-4 h-4 mr-1" />
          推送
        </button>
        
        <button 
          @click="showBranches"
          class="flex items-center justify-center px-3 py-2 text-sm bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300 rounded-md hover:bg-purple-100 dark:hover:bg-purple-900/30 transition-colors"
        >
          <Icon icon="material-symbols:account-tree" class="w-4 h-4 mr-1" />
          分支
        </button>
        
        <button 
          @click="showHistory"
          class="flex items-center justify-center px-3 py-2 text-sm bg-orange-50 dark:bg-orange-900/20 text-orange-700 dark:text-orange-300 rounded-md hover:bg-orange-100 dark:hover:bg-orange-900/30 transition-colors"
        >
          <Icon icon="material-symbols:history" class="w-4 h-4 mr-1" />
          历史
        </button>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="isLoading" class="absolute inset-0 bg-white/80 dark:bg-gray-900/80 flex items-center justify-center">
      <div class="flex flex-col items-center">
        <div class="animate-spin w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full mb-3"></div>
        <p class="text-sm text-gray-600 dark:text-gray-400">{{ loadingMessage }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { Icon } from '@iconify/vue'

defineProps<{
  currentFile: string
}>()

defineEmits<{
  close: []
}>()

const isLoading = ref(false)
const loadingMessage = ref('')
const currentBranch = ref('main')
const repositoryStatus = ref('clean')
const commitMessage = ref('')

// 模拟文件变更数据
const changedFiles = ref([
  { 
    name: '欢迎.md', 
    path: '/welcome.md', 
    status: 'modified', 
    staged: false 
  },
  { 
    name: 'README.md', 
    path: '/README.md', 
    status: 'added', 
    staged: true 
  },
  { 
    name: '配置.json', 
    path: '/config.json', 
    status: 'deleted', 
    staged: false 
  }
])

// 计算属性
const stagedFiles = computed(() => changedFiles.value.filter(file => file.staged))

const statusColor = computed(() => {
  switch (repositoryStatus.value) {
    case 'clean': return 'text-green-600 dark:text-green-400'
    case 'dirty': return 'text-orange-600 dark:text-orange-400'
    case 'conflict': return 'text-red-600 dark:text-red-400'
    default: return 'text-gray-600 dark:text-gray-400'
  }
})

const statusIcon = computed(() => {
  switch (repositoryStatus.value) {
    case 'clean': return 'material-symbols:check-circle'
    case 'dirty': return 'material-symbols:pending'
    case 'conflict': return 'material-symbols:error'
    default: return 'material-symbols:help'
  }
})

// 方法
const getFileStatusIcon = (status: string) => {
  switch (status) {
    case 'modified': return 'material-symbols:edit'
    case 'added': return 'material-symbols:add-circle'
    case 'deleted': return 'material-symbols:delete'
    case 'renamed': return 'material-symbols:drive-file-rename-outline'
    default: return 'material-symbols:description'
  }
}

const getFileStatusColor = (status: string) => {
  switch (status) {
    case 'modified': return 'text-blue-600'
    case 'added': return 'text-green-600'
    case 'deleted': return 'text-red-600'
    case 'renamed': return 'text-purple-600'
    default: return 'text-gray-600'
  }
}

const getStatusBadgeClass = (status: string) => {
  switch (status) {
    case 'modified': return 'bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-300'
    case 'added': return 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-300'
    case 'deleted': return 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-300'
    case 'renamed': return 'bg-purple-100 text-purple-800 dark:bg-purple-900/20 dark:text-purple-300'
    default: return 'bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-300'
  }
}

const getStatusText = (status: string) => {
  switch (status) {
    case 'modified': return '已修改'
    case 'added': return '新增'
    case 'deleted': return '已删除'
    case 'renamed': return '重命名'
    default: return '未知'
  }
}

const toggleFileStaging = (file: any) => {
  file.staged = !file.staged
  updateRepositoryStatus()
}

const stageAllFiles = () => {
  changedFiles.value.forEach(file => {
    file.staged = true
  })
  updateRepositoryStatus()
}

const updateRepositoryStatus = () => {
  if (changedFiles.value.length === 0) {
    repositoryStatus.value = 'clean'
  } else {
    repositoryStatus.value = 'dirty'
  }
}

const commitChanges = async () => {
  if (!commitMessage.value.trim() || stagedFiles.value.length === 0) return
  
  isLoading.value = true
  loadingMessage.value = '正在提交更改...'
  
  try {
    // 模拟提交过程
    await new Promise(resolve => setTimeout(resolve, 2000))
    
    // 移除已提交的文件
    changedFiles.value = changedFiles.value.filter(file => !file.staged)
    commitMessage.value = ''
    updateRepositoryStatus()
    
    console.log('提交成功')
  } catch (error) {
    console.error('提交失败:', error)
  } finally {
    isLoading.value = false
    loadingMessage.value = ''
  }
}

const pullChanges = async () => {
  isLoading.value = true
  loadingMessage.value = '正在拉取远程更改...'
  
  try {
    await new Promise(resolve => setTimeout(resolve, 1500))
    console.log('拉取成功')
  } catch (error) {
    console.error('拉取失败:', error)
  } finally {
    isLoading.value = false
    loadingMessage.value = ''
  }
}

const pushChanges = async () => {
  isLoading.value = true
  loadingMessage.value = '正在推送到远程仓库...'
  
  try {
    await new Promise(resolve => setTimeout(resolve, 2000))
    console.log('推送成功')
  } catch (error) {
    console.error('推送失败:', error)
  } finally {
    isLoading.value = false
    loadingMessage.value = ''
  }
}

const showBranches = () => {
  console.log('显示分支列表')
}

const showHistory = () => {
  console.log('显示提交历史')
}

// 初始化
updateRepositoryStatus()
</script>